<template>
  <div class="custom-body">
    <div class="custom-content" :style="borderStyle">
      <div class="custom-header">
        <div class="header-input">
          <div class="header-input-span">
            <input
              v-model="query.blurry"
              placeholder="搜索您需要的服务 / Search Service"
              @keyup="queryObject"
            >&nbsp;&nbsp;&nbsp;
            <div class="header-input-icon" @click="queryObject">
              <i class="el-icon-search" />
            </div>
          </div>
        </div>
        <div class="custom-header-li">
          <query-item
            v-for="(item, index) in queryList"
            :key="'query-' + index"
            :params="item"
            @call-back="queryClick"
          />
        </div>
      </div>
      <el-empty
        v-if="dataList === null || dataList.length === 0"
        :image-size="100"
      />
      <div v-else class="custom-content-body">
        <div class="custom-content-ul">
          <div v-for="(item, index) in dataList" :key="'server-li-' + index" class="custom-content-ul-body">
            <div class="ul-header">
              <div class="header-span">{{ item.bmmc }}</div>
            </div>
            <div class="custom-ul-body">
              <div
                v-for="(obj, val) in item.dataList"
                :key="'server-' + index + '-' +val"
                class="custom-ul-li"
              >
                <div class="li-body" @click="openEntity(obj)">
                  <div class="li-title-body">
                    <div class="title-header">
                      {{ obj.name }}
                    </div>
                    <div class="title-button">
                      {{ obj.ssxtmc }}
                    </div>
                  </div>
                  <div class="li-title-image">
                    <el-image :src="baseURL + obj.appIcon" />
                  </div>
                </div>
              </div>
              <div style="clear: both" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import QueryItem from './slot/item'
import { mobile } from '@/mixins/mobile'

export default {
  name: 'OfficeHallCollapse', // app服务手风琴版
  mixins: [mobile({ tabs: 'service' })],
  components: { QueryItem }
}
</script>

<style lang="scss" scoped>
.custom-content {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
}

.header-input-span > input {
  width: 100%;
  border: none;
  outline: none;
}

.custom-header {
  display: flex;
  flex-wrap: wrap;
  background-color: #f2f6fc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

/*.custom-content-ul ::v-deep .el-collapse-item__wrap {
  background: #409eff0f;
}
.custom-content-ul ::v-deep .el-collapse-item__header {
  background: #409eff0f;
}*/
.header-input {
  width: 100%;
  line-height: 40px;
  height: 40px;
  padding: 5px 15px;
  box-sizing: border-box;
  font-size: 0.8rem;
}

.header-input-span {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background-color: #ffffff;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  line-height: 30px;
  color: #606266;
}

.header-input-icon {
  position: absolute;
  right: 5px;
  top: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.custom-header-li {
  width: 100%;
  padding: 0 15px;
  display: flex;
  flex-flow: row wrap;
}

.custom-header-li:not(:last-child) {
  border-bottom: #e4e7ed dashed 1px;
}

.custom-content-body {
  width: 100%;
  height: auto;
  box-sizing: border-box;

  .custom-content-ul {
    width: 100%;
    box-sizing: border-box;
    .custom-content-ul-body {
      width: 100%;
      margin-top: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      border-radius: 0 4px 4px 4px;
      .ul-header {
        width: 100%;
        height: 45px;
        line-height: 45px;

        .header-span {
          // width: max-content;
          height: 45px;
          padding: 0 20px;
          background-color: #ffffff;
          letter-spacing: 1px;
          font-size: 0.9rem;
          font-weight: bolder;
          display: block;
          width: 100%;
          position: relative;
        }

        .header-span::before {
          content: '';
          width: 3px;
          height: 20px;
          top: 13px;
          background-color: #0a84ff;
          position: absolute;
          left: 8px;
        }
      }

      .custom-ul-body {
        width: 100%;
        background-color: #ffffff;
        padding: 5px;
        box-sizing: border-box;

        .custom-ul-li {
          width: 50%;
          height: 80px;
          padding: 5px;
          box-sizing: border-box;
          float: left;

          .li-body {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
            background-color: #ecf5ff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
            border-radius: 2px;
            height: 100%;
            position: relative;
            display: flex;
            flex-flow: row nowrap;

            .li-title-body {
              flex: 1 1;
              height: 100%;

              .title-header {
                width: 100%;
                height: 40px;
                font-size: 0.9rem;
                text-align: left;
                padding: 4px 3px;
                box-sizing: border-box;
                line-height: 16px;
              }

              .title-button {
                width: 100%;
                height: 20px;
                font-size: 0.8rem;
                color: #909399;
                padding: 0 3px;
              }
            }

            .li-title-image {
              width: 60px;
              height: 60px;
              padding: 6px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
}
</style>
